<template>
	<view class="container">
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper class="carousel" circular @change="swiperChange" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in banners" :key="index" class="carousel-item"
					@click="naviTo(item.toUrl)">
					<image :src="item.picUrl" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{ swiperCurrent + 1 }}</text>
				<text class="sign">/</text>
				<text class="num">{{ swiperLength }}</text>
			</view>
		</view>

		<view class="cate-section">
			<view class="cate-item" @click="toGoodList()" style="margin-right: 10rpx;">
				<text class="main-title">自助点单</text>
				<text class="sub-title">简单便捷不社恐</text>
				<image src="../../static/diandan.png" style="width: 200rpx;height: 180rpx;margin-bottom: 20rpx;">
				</image>
			</view>
			<view class=""></view>
			<view class="cate-item">
				<view class="chuzhi-item" @click="toChuzhi">
					<view class="chuzhi-img">
						<image src="../../static/chongzhi.png" style="width: 140rpx;height: 110rpx;"></image>
					</view>
					<view class="chuzhi-desc">
						<text class="main-title">储值有礼</text>
						<text class="sub-title">充值100送50</text>
					</view>
				</view>
				<view class="common-split"></view>
				<view class="jifen-item" @click="toJifen">
					<view class="jifen-img">
						<image src="../../static/jifen.jpg" style="width: 150rpx;height: 150rpx;"></image>
					</view>
					<view class="jifen-desc">
						<text class="main-title">积分商城</text>
						<text class="sub-title">积分兑换好礼</text>
					</view>
				</view>
			</view>
		</view>

		<view class="main-func-content">
			<view class="jiameng-content" @click="toZhaoshang">
				<text class="main-title">我要开店</text>
				<image src="../../static/jiameng.png" style="width: 200rpx;height: 200rpx;margin-bottom: 20rpx;">
				</image>
			</view>
			<view class="tuancan-content" @click="toVideo">
				<text class="main-title">视频号</text>
				<text class="sub-title">精彩时刻先了解</text>
				<image src="../../static/video.png" style="width: 200rpx;height: 150rpx;margin-bottom: 20rpx;">
				</image>
			</view>
		</view>
		<view>
			<uni-fab ref="fab" :pattern="pattern" popMenu="false" :content="content" horizontal="right" vertical="bottom"
				direction="vertical" :popMenu="true" @trigger="trigger" />
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import kefu from "@/components/kefu.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		formatDate
	} from '@/common/date';
	export default {
		components: {
			kefu
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				swiperCurrent: 0,
				swiperLength: 0,
				banners: [],
				menus: [],
				information: {},
				trainingGrounds: [],
				meals: [],
				coachList: [],
				pattern: {
					color: 'gray',
					backgroundColor: '#FFFFFF',
					selectedColor: '#007AFF',
					buttonColor: '#127202'
				},
				content: [{
					iconPath: '/static/openDamen.png',
					selectedIconPath: '/static/componentHL.png',
					text: '大门',
					active: false
				},
				{
					iconPath: '/static/baoxiang.png',
					selectedIconPath: '/static/componentHL.png',
					text: '包厢',
					active: false
				},{
					iconPath: '/static/xufeiIndex.png',
					selectedIconPath: '/static/componentHL.png',
					text: '续费',
					active: false
				}]
			};
		},
		filters: {
			formatRichText(html) { //控制小程序中图片大小
				if (null == html) {
					return;
				}
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
		async onLoad(options) {
			this.$refs.fab.open();
			this.loadData();
		},
		onShareAppMessage(res) {
			if (!this.hasLogin) {
				uni.redirectTo({
					url: '/pages/public/login'
				});
				return false;
			}
			var that = this;
			let memberId = that.userInfo.userInfo.id;
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "爱响袋台球", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/index/index?fromMemberId=' + memberId, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {
						that.$core.msg("分享成功.");
					}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
						that.$core.msg("取消分享.");
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
						that.$core.msg("分享失败,请稍后再试.");
					}
				},
				complete: function() {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
			return shareObj
		},
		methods: {
			...mapMutations(['login', 'logout']),
			toMealDetail(mealId) {
				uni.navigateTo({
					url: '/pages/meallist/selectMeal?id=' + mealId
				})
			},
			trigger(e) {
				let that = this;
				if (e.item.text == '大门') {
					that.openDoor();
				}
				if(e.item.text=='续费'){
					uni.showModal({
						title: '提示',
						content: '首页续费即将上线,请暂时前往预约->操作中续费',
						success: (e) => {
							if (e.confirm) {
							}
						}
					})
				}
				if(e.item.text=='包厢'){
					uni.showModal({
						title: '提示',
						content: '首页开包厢门即将上线,请暂时前往预约->操作中开启',
						success: (e) => {
							if (e.confirm) {
							}
						}
					})
				}
			},
			async openDoor(storeId){
				if (this.hasLogin) {
					console.log(this.userInfo.userInfo)
					let data = await Api.apiCall('get', Api.qsg.openDamenByUniapp, {memberId:this.userInfo.userInfo.id});
					if(data==0){
						uni.showToast({
							title:'操作成功'
						})
					}
				}
				
			},
			toGoodList(){
				uni.navigateTo({
					url: '/pages/store/storeList'
				})
			},
			toCoachList() {
				uni.navigateTo({
					url: '/pages/coach/pages/coachlist'
				})
			},
			toChuzhi() {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录.',
						success: function (res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
							} else if (res.cancel) {
								
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/pages/store/storeList?type=chongzhi'
					})
				}
			},
			toJifen() {
				uni.navigateTo({
					url: '/pages/index/commonPage?type=jifen'
				})
			},
			toZhaoshang() {
				uni.navigateTo({
					url: '/pages/jiameng/jiameng'
				})
			},
			toVideo() {
				uni.navigateTo({
					url: '/pages/index/commonPage?type=video'
				})
			},
			toMealList() {
				uni.navigateTo({
					url: '/pages/meallist/selectRoom'
				})
			},
			async getMeal() {
				let params = {
					storeId: Api.STORE_ID
				};
				let data = await Api.apiCall('get', Api.meal.getMeals, params);
				if (data) {
					this.meals = data;
				}
			},
			async getCoachList() {
				let that = this;
				let params = {
					pageNum: 1
				};
				let data = await Api.apiCall('get', Api.index.getCoaches, params);
				if (data) {
					that.coachList = data.records || [];
				}
			},
			toLivePlayer() {
				// let roomId = [1]
				// let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index' })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
				// wx.navigateTo({
				//     url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
				// })
			},
			toExerciseMini() {
				uni.navigateToMiniProgram({
					appId: 'wxe00b45812e049422'
				});
			},
			getTrainGroundDetail(id) {
				uni.navigateTo({
					url: '/pages/trainground/trainground?id=' + id
				});
			},
			getInformationDetail(information) {
				uni.redirectTo({
					url: '/pages/index/informationDetail?informationUrl=' + information.toUrl
				})
			},
			async loadData() {
				let that = this;
				let data = await Api.apiCall('get', Api.qsg.indexBanner, {});
				if (data) {
					that.banners = data;
					that.swiperLength = that.banners.length;
				}
			},
			getMenuDetail(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			},
			naviTo(toUrl) {
				uni.navigateTo({
					url: toUrl
				})
			},
			dateFormat(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			}
		}
	};
</script>
<style lang="scss">
	.tagList {
		overflow: hidden;
		height: 40rpx;
	}

	.xun-title {
		font-size: 38upx;
		font-weight: bold;
		line-height: 1;
		margin-top: 30rpx;
	}

	.carousel-section {
		position: relative;
		// padding-top: 10px;
	}

	.carousel {
		width: 100%;
		height: 500upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			// border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 335rpx;
		bottom: 20upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;
		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 25rpx 25rpx;
		background: #127202;

		.cate-item {
			flex: 1;
			height: 340upx;
			background-color: #ffffff;
			border-radius: 15upx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			.chuzhi-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 200upx;

				.chuzhi-img {
					flex: 1;
					margin-right: 20rpx;
				}

				.chuzhi-desc {
					flex: 2;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.common-split {
				height: 0;
				border: 1px dashed #127202;
				width: 375upx;
			}

			.jifen-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 200upx;

				.jifen-img {
					flex: 1;
					margin-right: 20rpx;
				}

				.jifen-desc {
					flex: 2;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.main-title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 22rpx;
				color: #B2B2B2;
			}
		}

		.cate-split {
			width: 0;
			border: 1px dashed #127202;
			height: 398upx;
		}

	}

	.main-func-content {
		width: 750rpx;
		height: 300rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
		background-color: #127202;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.jiameng-content {
			flex: 1;
			height: 280rpx;
			background-color: #ffffff;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			.main-title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 22rpx;
				color: #B2B2B2;
			}
		}

		.tuancan-content {
			flex: 1;
			margin-left: 30rpx;
			height: 280rpx;
			background-color: #ffffff;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			.main-title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 22rpx;
				color: #B2B2B2;
			}
		}
	}
</style>
